<template>
  <div class="merchandise-management views-container">
       <el-dialog v-if="dialogTableType === 'balanceWithdrawStatus'" @close="resetDialogFormData" :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">分销商审核</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-reject_reason">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-reject_reason">
                            <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="审核状态" prop="name">
                                    <el-radio-group v-model="formFormatData.formData.apply_status">
                                        <!-- <el-radio label="10">待审核</el-radio> -->
                                        <el-radio label="20">审核通过</el-radio>
                                        <el-radio label="30">驳回</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="原因" prop="merchantlog" v-if="formFormatData.formData.apply_status=='30'">
                                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model.trim="formFormatData.formData.reject_reason">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" type="primary" @click="saveContent" :loading="loading12">确定</el-button>
        </footer>
    </el-dialog>
     <el-dialog :visible.sync="dialogVisibleImg" width="30%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">驳回原因</span>
            </div>
            <p style="padding:20px;min-height:200px">{{openDialogText}}</p>
        </div>
    </el-dialog>
    <div class="wlm-table" v-loading="f_loading.loading">
      <div class="wlm-table-header" style="margin-bottom:20px;">
        <!-- :model="tableFormatData.userTable.files" -->
        <el-form
          size="small"
          label-width="80px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item
            label=""
            class="filter"
          >
            <el-form-item
              label="用户："
              class="search"
            >
              <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.nickName" style="width:160px;"></el-input>
            </el-form-item>
          
          </el-form-item>
          <el-form-item
            label=""
            class="filter-btns"
          >
            <!--  -->
            <el-button type="primary" @click="filesSerch">筛选</el-button>
            <!--  -->
            <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--  -->
      <el-tabs type="card" @tab-click="filesSerch" v-model="tableFormatData.userTable.files.apply_status">
           <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane
          label="待审核"
          name="10"
        ></el-tab-pane>
        <el-tab-pane
          label="审核通过"
          name="20"
        ></el-tab-pane>
        <el-tab-pane
          label="驳回"
          name="30"
        ></el-tab-pane>
        <el-tab-pane
          label="已打款"
          name="40"
        ></el-tab-pane>
      </el-tabs>
      <div class="wlm-table-content">
        <!--  -->
        <el-table style="width: 100%" :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange">
          <!-- <el-table-column v-if="tableFormatData.userTable.files.apply_status == '20' || tableFormatData.userTable.files.apply_status == '10'" type="selection" width="55">
                            </el-table-column> -->
          <el-table-column
            prop="date"
            label="用户"
          >
            <template slot-scope="scope">
              <div class="wlm-table-logos" style="display:flex;">
                    <img class="logo" :src="scope.row.avatarUrl?scope.row.avatarUrl:''">
                    <div class="inner-text">
                        <p>{{scope.row.nickName}}</p>
                        <span>ID:{{scope.row.user_id}}</span>
                    </div>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="申请金额"
          >
            <template slot-scope="scope">
                <div>{{scope.row.money}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="手续费"
          >
            <template slot-scope="scope">
                <div>{{scope.row.commission}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="打款方式"
          >
            <template slot-scope="scope">
                <p v-if="scope.row.pay_type==10">微信</p>
                <p v-if="scope.row.pay_type==20">支付宝</p>
                <p v-if="scope.row.pay_type==30">银行卡</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="支付宝账号"
          >
            <template slot-scope="scope">
                <p>{{scope.row.alipay_account}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="开户行名称"
          >
            <template slot-scope="scope">
                <p>{{scope.row.bank_name}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="银行开户名"
          >
            <template slot-scope="scope">
                <p>{{scope.row.bank_account}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="银行卡号"
          >
            <template slot-scope="scope">
                <p>{{scope.row.bank_card}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="申请状态"
          >
            <template slot-scope="scope">
                <p v-if="scope.row.apply_status==10">待审核</p>
                <p v-if="scope.row.apply_status==20">审核通过</p>
                <p v-if="scope.row.apply_status==30">驳回</p>
                <p v-if="scope.row.apply_status==40">已打款</p>
            </template>
          </el-table-column>
         
          <!-- <el-table-column
            prop="date"
            label="渠道信息"
          >
            <template slot-scope="scope">
            </template>
          </el-table-column> -->
            <el-table-column
            prop="date"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
                <div class="operation-group" >
                            <el-button v-if="scope.row.apply_status==10" class="wlm-text" type="text" @click="changeFormatType('balanceWithdrawStatus');formFormatDialogEditEvt({redirect:'ids',id:scope.row.id,toggle:'dialogTableVisible',noEdit:true})">审核</el-button>
                            <el-button v-if="scope.row.apply_status==20" class="wlm-text" type="text" @click="paymentbtn(scope.row.id,1)">标记已打款</el-button>
                            <div v-if="scope.row.apply_status==20" class="btn-line"></div>
                            <el-button v-if="scope.row.apply_status==20"  class="wlm-text" type="text" @click="paymentbtn(scope.row.id,2)">确认打款</el-button>
                            <el-button v-if="scope.row.apply_status==30" class="wlm-text" type="text" @click="changeFormatType('balanceWithdrawStatus');openDialog(scope.row.reject_reason)">驳回原因</el-button>
                            <div v-if="scope.row.apply_status==40">{{"-"}}</div>
                        </div>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination-reject_reason flex-row flex-justify-b flex-align-c">
                <div></div>
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
balanceWithdraw,
balanceWithdrawStatus,
balanceBjPayment,
balancePayment
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'),mixins.getters('Form')],
  name: 'withdrawalofBalance',
  components: {

  },
  created() {

  },
  data() {
    return {
        f_loading:{
            loading:false,
        },
        loading12:false,
        dialogTableVisible:false,
        dialogVisibleImg:false,
        openDialogText:'',
        dialogTableType: 'balanceWithdrawStatus',
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          loding: false,
          api: {
            getList: balanceWithdraw,
            // delList: delWithdrawInfo,
            // msgConfig: {
            //   del: {
            //     type: 'warning',
            //     msg: '是否确认删除分销申请？'
            //   }
            // }
          },
          tableData: [],
          files: {
              nickName:'',
            apply_status: '',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
            // change: {
            //   refund: {
            //     name: '退款',
            //     key: 'refund',
            //     api: withdrawPayment
            //   },
            //   flag: {
            //     name: '标记打款',
            //     key: 'refund',
            //     api: balanceBjPayment
            //   }
            // },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      },
    }
  },
  methods: {
        paymentbtn(id,index){
            if(index==2){
                this.$confirm('是否确认打款?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.f_loading.loading = true
                    balancePayment({id:id}).then(res=>{
                        console.log("dssssssssaaaaaaaa",res)
                        if(res.data.data==1){
                            this.f_loading.loading = false
                            this.filesSerch()
                        }
                    }).finally(()=>{
                            this.filesSerch()
                        this.f_loading.loading=false
                    })
              
                }).catch(() => {
                        this.f_loading.loading=false
                this.$message({
                    type: 'info',
                    message: '已取消!'
                });          
                });
            }else{
                this.$confirm('是否标记已打款?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.f_loading.loading = true
                    balanceBjPayment({id:id}).then(res=>{
                        console.log("dssssssssaaaaaaaa",res)
                        if(res.data.data==1){
                            this.f_loading.loading = false
                            this.filesSerch()
                        }
                    }).finally(()=>{
                            this.filesSerch()
                        this.f_loading.loading=false
                    })
              
                }).catch(() => {
                        this.f_loading.loading=false
                this.$message({
                    type: 'info',
                    message: '已取消!'
                });          
                });
            }
            
      },
      openDialog(params) {
      this.openDialogText = params
      this.dialogVisibleImg = true
    },
      changeFormatType(type) {
      this.dialogTableType = type
      switch (type) {
        case 'balanceWithdrawStatus':
          this.formFormatData = {
            key: 'userForm',
            model: {
              noCreateEdit: false,
              bindDialog: 'dialogTableVisible'
            },
            api: {
              editForm: {
                api: balanceWithdrawStatus,
                params: {
                  id: ''
                },
                // redirect: 'id'
              },
              submitForm: balanceWithdrawStatus
            },
            formData: {
              id: '',
              reject_reason: '',
              apply_status: '20'
            },
            rules: {}
          }
          break
      }
    },
     saveContent() {
    //   this.formFormatSubmit()
    this.loading12 = true
    balanceWithdrawStatus(this.formFormatData.formData).then(res=>{
        console.log("fdsfdsfdsfd ",res)
        if(res.data.code==1){
            this.dialogTableVisible = false
            this.$message.success(res.data.msg)
            this.loading12 = false
            this.filesSerch()
        }
    })
    },
  }
}
</script>
<style lang="scss" scoped>
.withdrawal-application {}
</style>
